<template>
	<view class="container">
		<view class="navbar">
			<view @click="goBack" class="navbar-back">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="navbar-title">订单详情</view>
			<view style="width: 24px;"></view>
		</view>
		
		<view class="page-container">
			<!-- 订单状态 -->
			<view class="order-status-bar">
				<view class="order-status-icon">
					<text class="iconfont" :class="orderStatusIcon"></text>
				</view>
				<view class="order-status-text">
					<view class="order-status-main">{{ orderInfo.statusText }}</view>
					<view class="order-status-detail">{{ orderInfo.statusDetail }}</view>
				</view>
			</view>
			
			<!-- 摄影师信息 -->
			<view class="content-block">
				<view class="photographer-info">
					<image :src="orderInfo.photographerAvatar" mode="aspectFill" class="photographer-avatar"></image>
					<view>
						<view class="photographer-name">{{ orderInfo.photographerName }}</view>
						<view style="font-size: 13px; color: var(--light-text);">{{ orderInfo.photographerDesc }}</view>
					</view>
				</view>
				<view class="btn-group">
					<button class="btn btn-outline" @click="contactPhotographer">
						<text class="iconfont icon-comment"></text> 联系摄影师
					</button>
					<button class="btn btn-primary" @click="viewPhotographerProfile">
						<text class="iconfont icon-user"></text> 查看主页
					</button>
				</view>
			</view>
			
			<!-- 拍摄信息 -->
			<view class="content-block">
				<view class="block-title">拍摄信息</view>
				<view class="detail-list">
					<view class="detail-item">
						<view class="detail-label">预约时间</view>
						<view class="detail-value">{{ orderInfo.appointmentTime }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">拍摄地点</view>
						<view class="detail-value">{{ orderInfo.location }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">服务套餐</view>
						<view class="detail-value">{{ orderInfo.packageName }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">拍摄时长</view>
						<view class="detail-value">{{ orderInfo.duration }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">套数</view>
						<view class="detail-value">{{ orderInfo.outfits }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">精修张数</view>
						<view class="detail-value">{{ orderInfo.photoCount }}</view>
					</view>
				</view>
			</view>
			
			<!-- 订单跟踪 -->
			<view class="content-block">
				<view class="block-title">订单进度</view>
				<view class="progress-timeline">
					<view class="timeline-item" v-for="(step, index) in orderProgress" :key="index">
						<view :class="['timeline-dot', step.completed ? 'dot-completed' : 'dot-pending']">
							<text class="iconfont" :class="step.completed ? 'icon-check' : 'icon-circle'" :style="{ fontSize: step.completed ? '10px' : '8px' }"></text>
						</view>
						<view class="timeline-content">
							<view class="timeline-title">{{ step.title }}</view>
							<view class="timeline-time">{{ step.time }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 价格详情 -->
			<view class="content-block">
				<view class="block-title">价格详情</view>
				<view class="detail-list">
					<view class="detail-item">
						<view class="detail-label">服务费</view>
						<view class="detail-value">¥{{ orderInfo.price }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">优惠</view>
						<view class="detail-value">-¥{{ orderInfo.discount }}</view>
					</view>
					<view class="detail-item" style="font-weight: 500; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color);">
						<view>实付金额</view>
						<view class="detail-value" style="color: var(--primary-color);">¥{{ orderInfo.actualPrice }}</view>
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="content-block">
				<view class="block-title">订单信息</view>
				<view class="detail-list">
					<view class="detail-item">
						<view class="detail-label">订单编号</view>
						<view class="detail-value">{{ orderInfo.id }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">创建时间</view>
						<view class="detail-value">{{ orderInfo.createTime }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">支付方式</view>
						<view class="detail-value">{{ orderInfo.paymentMethod }}</view>
					</view>
				</view>
			</view>
			
			<!-- 底部按钮操作 -->
			<view class="content-block">
				<view class="btn-group">
					<button class="btn btn-outline" @click="cancelOrder" v-if="orderInfo.status === 'pending'">取消订单</button>
					<button class="btn btn-primary" @click="changeAppointment" v-if="orderInfo.status === 'pending'">修改预约</button>
					<button class="btn btn-primary" @click="downloadPhotos" v-if="orderInfo.status === 'completed'">下载照片</button>
					<button class="btn btn-primary" @click="writeReview" v-if="orderInfo.status === 'completed' && !orderInfo.reviewed">评价订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: null,
				orderInfo: {
					id: '20230505102532587',
					status: 'pending', // pending, processing, completed, canceled
					statusText: '等待拍摄',
					statusDetail: '已预约，等待拍摄日期',
					photographerName: '艾米丽摄影工作室',
					photographerDesc: '专业人像摄影师',
					photographerAvatar: 'https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg',
					appointmentTime: '2023-05-12 14:00',
					location: '摄影棚拍摄',
					packageName: '高级套餐',
					duration: '2小时',
					outfits: '2套服装',
					photoCount: '15张',
					price: '299.00',
					discount: '0.00',
					actualPrice: '299.00',
					createTime: '2023-05-05 10:25',
					paymentMethod: '微信支付',
					reviewed: false
				},
				orderProgress: [
					{
						title: '订单创建',
						time: '2023-05-05 10:25',
						completed: true
					},
					{
						title: '付款完成',
						time: '2023-05-05 10:25',
						completed: true
					},
					{
						title: '拍摄阶段',
						time: '预约于 2023-05-12 14:00',
						completed: false
					},
					{
						title: '照片处理',
						time: '预计3-5个工作日',
						completed: false
					},
					{
						title: '交付完成',
						time: '等待中',
						completed: false
					}
				]
			}
		},
		computed: {
			orderStatusIcon() {
				switch(this.orderInfo.status) {
					case 'pending':
						return 'icon-clock';
					case 'processing':
						return 'icon-camera';
					case 'completed':
						return 'icon-check-circle';
					case 'canceled':
						return 'icon-close-circle';
					default:
						return 'icon-clock';
				}
			}
		},
		onLoad(options) {
			// 获取传递的订单ID
			if (options.id) {
				this.orderId = options.id;
				this.loadOrderDetail();
			}
		},
		methods: {
			// 加载订单详情
			loadOrderDetail() {
				// 实际应用中应该发送请求获取订单详情
				console.log('加载订单详情，ID:', this.orderId);
				
				// 模拟根据订单ID获取不同状态的订单
				if (this.orderId === '1002') {
					this.orderInfo.status = 'completed';
					this.orderInfo.statusText = '已完成';
					this.orderInfo.statusDetail = '拍摄及照片处理已完成';
					this.orderProgress[0].completed = true;
					this.orderProgress[1].completed = true;
					this.orderProgress[2].completed = true;
					this.orderProgress[3].completed = true;
					this.orderProgress[4].completed = true;
					this.orderProgress[4].time = '2023-04-20 15:30';
				} else if (this.orderId === '1003') {
					this.orderInfo.status = 'canceled';
					this.orderInfo.statusText = '已取消';
					this.orderInfo.statusDetail = '订单已取消';
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 联系摄影师
			contactPhotographer() {
				uni.showToast({
					title: '联系摄影师功能开发中',
					icon: 'none'
				});
			},
			
			// 查看摄影师主页
			viewPhotographerProfile() {
				uni.navigateTo({
					url: '/pages/photographer_detail/photographer_detail?id=1'
				});
			},
			
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '确定要取消此订单吗？',
					success: (res) => {
						if (res.confirm) {
							// 实际应用中应该发送请求取消订单
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				});
			},
			
			// 修改预约
			changeAppointment() {
				uni.showToast({
					title: '修改预约功能开发中',
					icon: 'none'
				});
			},
			
			// 下载照片
			downloadPhotos() {
				uni.showToast({
					title: '照片下载中',
					icon: 'loading'
				});
				setTimeout(() => {
					uni.showToast({
						title: '下载完成',
						icon: 'success'
					});
				}, 1500);
			},
			
			// 评价订单
			writeReview() {
				uni.navigateTo({
					url: '/pages/review/review?id=' + this.orderId
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-width: 100%;
		padding: 0;
		overflow-x: hidden;
	}
	
	/* 顶部导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		background-color: #fff;
		border-bottom: 1px solid $border-color;
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 0 15px;
		/* #ifdef MP-WEIXIN */
		padding-top: var(--status-bar-height);
		height: calc(44px + var(--status-bar-height));
		/* #endif */
	}
	
	.navbar-title {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		flex: 1;
	}
	
	.navbar-back {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
	}
	
	/* 订单状态样式 */
	.order-status-bar {
		background-color: $primary-color;
		color: white;
		padding: 15px;
		display: flex;
		align-items: center;
	}
	
	.order-status-icon {
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15px;
		font-size: 20px;
	}
	
	.order-status-text {
		display: flex;
		flex-direction: column;
	}
	
	.order-status-main {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 5px;
	}
	
	.order-status-detail {
		font-size: 13px;
		opacity: 0.8;
	}
	
	/* 内容区块样式 */
	.content-block {
		background-color: white;
		margin: 10px 0;
		padding: 15px;
	}
	
	.block-title {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	/* 摄影师信息样式 */
	.photographer-info {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.photographer-avatar {
		width: 50px;
		height: 50px;
		border-radius: 4px;
		object-fit: cover;
		margin-right: 15px;
	}
	
	.photographer-name {
		font-weight: 500;
		margin-bottom: 5px;
	}
	
	/* 详情列表样式 */
	.detail-list {
		margin-bottom: 10px;
	}
	
	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
	}
	
	.detail-label {
		color: $light-text;
	}
	
	.detail-value {
		text-align: right;
		font-weight: 500;
	}
	
	/* 进度跟踪样式 */
	.progress-timeline {
		margin: 10px 0;
	}
	
	.timeline-item {
		display: flex;
		position: relative;
		padding-bottom: 15px;
	}
	
	.timeline-item:last-child {
		padding-bottom: 0;
	}
	
	.timeline-item::before {
		content: '';
		position: absolute;
		top: 24px;
		left: 10px;
		width: 1px;
		height: calc(100% - 24px);
		background-color: #e6e6e6;
	}
	
	.timeline-item:last-child::before {
		display: none;
	}
	
	.timeline-dot {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15px;
		z-index: 1;
	}
	
	.dot-completed {
		background-color: $primary-color;
		color: white;
	}
	
	.dot-pending {
		background-color: #e6e6e6;
		color: white;
	}
	
	.timeline-content {
		flex: 1;
	}
	
	.timeline-title {
		font-weight: 500;
		margin-bottom: 2px;
	}
	
	.timeline-time {
		font-size: 12px;
		color: $light-text;
	}
	
	/* 页面容器 */
	.page-container {
		padding-bottom: 20px;
	}
	
	/* 按钮组样式 */
	.btn-group {
		display: flex;
		gap: 10px;
		margin-top: 10px;
	}
	
	/* iconfont */
	.icon-back:before {
		content: "\e679";
	}
	
	.icon-clock:before {
		content: "\e74f";
	}
	
	.icon-camera:before {
		content: "\e663";
	}
	
	.icon-check-circle:before {
		content: "\e77d";
	}
	
	.icon-close-circle:before {
		content: "\e77e";
	}
	
	.icon-comment:before {
		content: "\e667";
	}
	
	.icon-user:before {
		content: "\e7ae";
	}
	
	.icon-check:before {
		content: "\e600";
	}
	
	.icon-circle:before {
		content: "\e601";
	}
</style> 